Vanilla JS

Vanilla JS는 자바스크립트 프레임워크로 다른 프레임워크나 jQuery보다도 압도적으로 빠르고 웹표준을 잘 지키는 웹브라우저들에 대해서는 크로스 브라우징이 잘 되는 특성이 있다. 페이스북, 구글, 유튜브 등등 유명한 해외 사이트에서 사용되었으며, 다른 플랫폼보다도 오래되었음에도 불구하고 꾸준히 업데이트 되어 온 프레임워크이다. 용량도 매우 가벼워서 압축을 하는 경우 압축을 하지 않은 경우보다 용량이 더 나가는 역설적인 무게를 자랑한다.

어떠한 라이브러리나 프레임워크를 쓰지 않는 자바스크립트를 이르는 별명이다. 그러므로 바닐라 JS 자체의 용량은 0Byte이다. 용량 자체가 없으니 압축했을 때에는 압축 코드가 들어가 용량이 더 나갈 수밖에. 사용자정의된 라이브러리나 프레임워크 자체를 쓰지 않기 때문에 당연히 다른 라이브러리나 프레임워크를 사용했을 때보다 빠르고 호환성이 좋을 수밖에 없다. 또한 숙련된 사람일 수록 별의별 기능을 구현할 수 있다는 특징이 있다.

하지만 순수 자바스크립트의 특성상 라이브러리를 쓰면 간단하게 쓸 수 있는 코드가 길어지는 일이 왕왕 발생한다. 예를 들어서 jQuery를 쓰면

$('li').css('color','red')

이렇게 간단하게 표현할 수 있는 걸

const _doc = document
, qA = sel => _doc.querySelectorAll(sel);
for (let i of qA('li')){i.style.color='red'}

이런 식으로 반복문을 명시적으로 써서 표현해야 하는 경우도 생기기 때문에 초심자의 경우 더 어렵게 느껴지기도 한다.

그렇지만 디버그 기능에서는 바닐라 JS가 진가를 발휘한다. 바닐라 JS로 만든 구문은 디버그를 할 때에 해당 구문만을 조사하지만 라이브러리를 통해 만든 구문은 디버그를 할 때 해당 구문 뿐 아니라 라이브러리 파일 안을 몇 바퀴 돌고 오는 일도 있기 때문이다.